<!--
 * @Author: zyp yangpeng.zhang@fts.aero
 * @Date: 2024-05-29 15:31:11
 * @LastEditors: zyp yangpeng.zhang@fts.aero
 * @LastEditTime: 2024-07-03 14:06:07
 * @FilePath: \vue3-dynamic-module\src\modules\Movie\index.vue
 * @Description: 程式描述
-->
<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCards, EffectCoverflow } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import 'swiper/css/effect-cards';
import 'swiper/css/effect-coverflow';

const modules = [Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCards, EffectCoverflow];
// :effect="'cards'"
// :grabCursor="true"
const router = useRouter();
const data: any = reactive({
  goods: [
    {
      src: `https://m.ykimg.com/05350000650A4EB113EBC60CD531098F`,
    },
    {
      src: `https://ts1.cn.mm.bing.net/th/id/R-C.56f4c9a67e82aa8b4d7a1fa8dc8f404a?rik=89EGdETK5WcC8w&riu=http%3a%2f%2ftx-free-imgs.acfun.cn%2fd6QcZ2yxOT-Ybe26z-EJfyya-3eiAzy-JbYRRn.jpg%3fimageslim&ehk=S8fML0o5CDPF1yhAkLekI9uLyKBbPVXISvwsHkZI7yQ%3d&risl=&pid=ImgRaw&r=0`,
    },
    {
      src: `https://p3.itc.cn/q_70/images03/20211017/745f01beaa044091a96a8d70a1265be4.jpeg`,
    },
    {
      src: `https://www.yhwxj.com/wp-content/uploads/2023/03/2023030711513757.jpg`,
    },
  ],
  active: 0,
  navs: [
    {
      label: '热映推荐',
    },
    {
      label: '动作类',
    },
    {
      label: '爱情类',
    },
    {
      label: '喜剧类',
    },
    {
      label: '战争类',
    },
    {
      label: '动画类',
    },
    {
      label: '剧情类',
    },
    {
      label: '恐怖类',
    },
  ],
  list: [
    {loading:true, name: '影', url: `https://img.zcool.cn/community/011b2b5b9a2b21a801213deaa2f0d11.jpg@2o.jpg`},
    {loading:true, name: '云边有个小卖部', url: `https://p5.itc.cn/q_70/images01/20230918/52b19a6a997846fb9ae39a3608c64f11.jpeg`},
    {loading:true, name: '云边有个小卖部', url: `https://x0.ifengimg.com/ucms/2023_39/546FEA8E53E10ED3E4072C325C7B4C89BF3DF626_size150_w690_h966.jpg`},
    {loading:true, name: '风犬少年的天空', url: `https://n.sinaimg.cn/sinakd20201023s/127/w2048h1279/20201023/ef90-kavypmq5572537.jpg`},
    {loading:true, name: '咒怨', url: `https://n.sinaimg.cn/sinakd2021112s/192/w1024h768/20210112/ccdd-khmynua7325209.jpg`},
    {loading:true, name: '泰坦尼克号', url: `https://static-cse.canva.cn/blob/109721/b82aae367364f6c1764e8a16efcbd72.jpg`},
    {loading:true, name: '最好的我们', url: `https://ts1.cn.mm.bing.net/th/id/R-C.35a485356500efb0a1bc735988e702f3?rik=ox2sA9P3Fi1QtQ&riu=http%3a%2f%2fpuui.qpic.cn%2fvcover_vt_pic%2f0%2fe99nkj1xjthwfh61556604027%2f0&ehk=sghoxEULxY3eBBXapZmC8wxUGzeP6MrbRraXJTubhtw%3d&risl=&pid=ImgRaw&r=0`},
  ],
});

const {
  goods,
  active,
  navs,
  list,
} = toRefs(data);

// 点击返回
const onClickLeft = () => {
  router.go(-1);
}

// 懒加载
const handleClick = (e: any) => {
  console.log(e)
  router.push({
    path: '/movie/detail'
  })
}

onMounted(() => {
})
</script>

<template>
  <van-sticky>
    <van-nav-bar
      title="电影"
      left-arrow
      @click-left="onClickLeft"
    />
  </van-sticky>
  <swiper :slidesPerView="'auto'" :auto-height="true" :space-between="12" :autoplay="{ delay: 5000, disableOnInteraction: false }" :pagination="{ dynamicBullets: true, clickable: true,}" :coverflowEffect="{
      rotate: 50,
      stretch: 0,
      depth: 100,
      modifier: 1,
      slideShadows: true,
    }" :effect="'coverflow'" :modules="modules" class="super-swiper">
    <swiper-slide v-for="item in goods" :key="item._id" class="super-swiper-slide">
      <div>
        <img v-lazy="item.src" />
      </div>
    </swiper-slide>
  </swiper>
  <van-tabs v-model:active="active" scrollspy sticky offset-top="50">
    <van-tab v-for="(nav, inx) in navs" :title="nav.label">
      <h3 class="title">{{ nav.label }}</h3>
      <div class="grid-container">
        <div class="grid-item" v-for="(item, index) in list" :key="index" @click="handleClick">
          <img v-lazy="item.url" alt="Movie cover" />
          <div class="movie-info">{{ item.name }}</div>
        </div>
      </div>
    </van-tab>
  </van-tabs>
</template>

<style scoped lang="scss">
.super-swiper {
  width: 100%;
  .super-swiper-slide {
    width: 100%;
    img {
      width: 100%;
    }
  }
}
img {
  min-height: 50px;
}
.list {
  img {
    display: block;
  }
}
.title {
  padding: 0 10px;
}
.grid-container {
  column-count: 2;
  column-gap: 10px;
  margin: 10px;
  .grid-item {
    margin-bottom: 10px;
    break-inside: avoid;
    position: relative;
    img{
      width: 100%;
      height: 100%;
    }
    .movie-info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 0 10px;
      box-sizing: border-box;
      height: 35px;
      color: #FFF;
      line-height: 35px;
      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
    }
  }
}
</style>
